﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#--<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="../static/css/pagination.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/vehi.css">
    <link rel="stylesheet" href="../static/css/client.css">

    <title>容智车联车厢管家</title>
    <style>
        #recheck-btn {
            left: auto;
            top: 3px;
            right: 0;
            color: rgb(0, 163, 68);
            font-weight: bold;
            cursor: pointer;
        }
        .tit-top {
            background: rgb(0, 163, 68);
            height: 100px;
            color: rgb(255, 255, 255);
        }

        #pop-bottom {
            background: rgba(51, 51, 51, 0.8);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            z-index: 2;
        }

        .new-count {
            margin: -245px auto 0px -200px;
            border: 1px solid rgb(204, 204, 204);
            left: 50%;
            top: 50%;
            width: 400px;
            position: absolute;
            z-index: 3;
        }

        #new-count > div > ol {
            height: 250px;
            overflow-y: scroll;
            text-align: left;
        }
        .m-l-62 {
            margin-left: 80px;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <!--右边内容区-->
    <div class="row-fluid bg-white  pad-10 bdbox pos-re height100 yaxh">
        <div class="p-b-10 ov-h">
            <form class="navbar-search pull-left" method="post" action="../car/choose">
                <input type="text" class="search-query" placeholder="输入搜索信息" name="word" value="${word}"/>
                <button class="search-lence" type="Submit"></button>
            </form>
            <div class="pull-right offset4">
                <button class="btn bg-color" id="add_info">增加</button>
                <button class="btn bg-color" id="import_btn" data-toggle="modal" data-target="#myModal2">导入表格</button>
                <a class="btn bg-color" data-toggle="modal"  href="../car/exout?word=${word}" download="car.xls">导出</a>
            </div>
        </div>
        <!--以上是搜索框，增加按钮组-->
        <!--以下是内容表格区-->
        <table class="table cl-b table-btn  table-hover">
            <thead class="four-border">
            <tr>
                <th width="6%">序号</th>
                <th width="10%">车牌号码</th>
                <th width="10%">所属场站</th>
                <th width="10%">车辆品牌</th>
                <th width="10%">车辆型号</th>
                <th width="10%">车厢长度</th>
                <th width="10%">车厢宽度</th>
                <th width="10%">车厢高度</th>
                <th width="10%">车辆载重</th>
                <th width="14%">操作</th>
            </tr>
            </thead>
            <tbody id="f-table">
            <#list AllCar as car>
            <tr class="${car.id}">
                <td width="6%" class="t-c port-num">
                    <span class="txt-limit1" title="${car.carNumber}">${car_index+1+((currentPage-1)*size)}</span>
                </td>
                <td width="10%" class="t-c port-num" id="port-nums">
                    <span class="txt-limit1" title="${car.carCnumber}">${car.carCnumber!""}</span>
                </td>
                <td  width="10%" class="port-name">
                    <span class="txt-limit1" title="${car.stationName!""}">${car.stationName!""}</span></td>
                <td width="10%" class="port-owner">
                    <span class="txt-limit1" title="${car.carBrand!""}">${car.carBrand!""}</span>
                </td>
                <td width="10%" class="port-model">
                    <span class="txt-limit1" title="${car.model!""}">${car.model!""}</span>
                </td>
                <td width="10%" class="port-coords">
                    <span class="txt-limit1" title="${car.length!""}">${car.length!""}</span>
                </td>
                <td width="10%" class="port-coords2">
                    <span class="txt-limit1" title="${car.width!""}">${car.width!""}</span>
                </td>
                <td width="10%" class="port-coords3">
                    <span class="txt-limit1" title="${car.height!""}">${car.height!""}</span>
                </td>
                <td width="10%" class="port-weight">
                    <span class="txt-limit1" title="${car.loud!""}">${car.loud!""}</span>
                </td>
                <td class="port-id" style="display:none">
                    <span class="txt-limit1" title="${car.stationId!""}">${car.stationId!""}</span>
                </td>
                <td width="14%">
                    <button class="btn bg-color rewrite update_info">修改</button>
                    <button class="btn bg-color2" data-toggle="modal" data-target="#myModal">删除</button>
                </td>
            </#list>
            </tr>
            </tbody>
        </table>
        <div class="M-box"></div>
        <!-- 分页 -->
        <div class="col-md-12 column">
            <ul class="pagination pull-right">
                <ul class="pagination">
                <#if currentPage lte 1>
                    <li class="disabled"><a href="#">上一页</a></li>
                <#elseif type == "1">
                    <li><a href="../car/getCars?page=${currentPage - 1}&size=${size}">上一页</a></li>
                <#elseif type == "2">
                    <li><a href="../car/choose?page=${currentPage - 1}&size=${size}&word=${word}">上一页</a></li>
                </#if>
                <#if  maxSize gte 10>
                    <#if currentPage gte 6 && currentPage lte maxSize-4>
                        <#list currentPage-5.. currentPage+4 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage lte 6>
                        <#list 1..10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage gte maxSize-4>
                        <#list maxSize-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#elseif currentPage lte maxSize-4>
                        <#list currentPage-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#else >
                        <#list currentPage.. 10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    </#if>
                <#else >
                    <#list 1..maxSize as index>
                        <#if currentPage == index>
                            <li class="disabled"><a href="#">${index}</a></li>
                        <#elseif type == "1">
                            <li><a href="../car/getCars?page=${index}&size=${size}">${index}</a></li>
                        <#elseif type == "2">
                            <li><a href="../car/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                        </#if>
                    </#list>
                </#if>
                <#if currentPage gte maxSize>
                    <li class="disabled"><a href="#">下一页</a></li>
                <#elseif type == "1">
                    <li><a href="../car/getCars?page=${currentPage + 1}&size=${size}">下一页</a></li>
                <#elseif type == "2">
                    <li><a href="../car/choose?page=${currentPage + 1}&size=${size}&word=${word}">下一页</a></a></li>
                </#if>
                </ul>
            </ul>
        </div>
        <!-- 导入表格的模态框（Modal） -->
        <div class="modal fade dis-no" id="myModal2" tabindex="-2" role="dialog" aria-labelledby="myModalLabe2"
             aria-hidden="true" style="width:360px;margin-left:-180px;z-index:1042;">
            <div class="modal-dialog ov-h">
                <div class="modal-content ov-h">
                    <div class="modal-header bg-color">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <p class="modal-title text-center " id="myModalLabel">
                            选择文件
                        </p>
                    </div>
                <#--<form id="uploadFormFile" class="from-lj" method="post" action="../car/exoutIn" enctype="multipart/form-data">-->
                    <form id="uploadFormFile" class="from-lj">
                        <div class="modal-body text-center p-l-20  ov-h">
                            <p class="text-left">导入的文件格式为excel表格</p>
                            <p class="text-left"> 请在导入前下载导入模板</p>
                            <div class="row m-t-10 text-left p-l-20 ov-h">
                                <input type="text" class="m-t-10" placeholder="请输入文件名称" id="fileid"/>
                                <button class="btn btn-mini bg-color text-center pos-re ov-h" id="uploading">浏览<input type="file" class=" pos-ab" name="fileName" id="filePath" /></button>
                                </button>
                            </div>
                            <div class="row m-t-10 text-left p-l-20 ov-h">
                                <a href="#" style="color:#00F;">点击下载导入模板</a>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn bg-color span4 " onclick="uploadCar()">
                                导入
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--以下是信息修改/新建信息弹出页面-->
        <div class="pos-ab wh-bfb pad-30 bdbox dis-no" id="pop_info">
            <div class="container w-lim pad-10 ov-h bdbox">
                <div class="row-fluid p-t-10 bot-dot" style="display:none">
                    <div class="span3 text-right offset1">车牌号码:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="nums-input"/>
                        <input type="text" placeholder="点击再次输入" class="numsssss-input"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">车牌号码:</div>
                    <div class="span2">
                        <input type="text" min="1" placeholder="点击再次输入" class="num-input"/></div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">所属场站:</div>
                    <div class="span8 pos-re">
                        <input type="text" placeholder="点击再次输入" class="name-input" id="carStation"
                               style="background-color: #eee;cursor: not-allowed;" readonly/>
                        <input type="text" placeholder="点击再次输入" class="stationId-input" id="carStationId" style=" display:none">
                        <span class="pos-ab chakan-lj" id="recheck-btn">修改/查看</span>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">车辆型号:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="model-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">车辆品牌:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="owner-input"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">车厢长度:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="coords-input"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">车厢宽度:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="coords-input2"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">车厢高度:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="coords-input3"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">车辆载重:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击再次输入" class="weight-input"/>
                    </div>
                </div>
            </div>
            <div class="w-lim2 pad-10 ov-h bdbox">
                <!--以下按钮组用于修改信息用-->
                <div class="row-fluid p-t-30 dis-no" id="txt_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="updateCar">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
                <!--以下按钮组用于新建信息用-->
                <div class="row-fluid p-t-30 dis-no" id="new_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="addCar">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 点击删除按钮时弹出的模态框（Modal） -->
<div class="modal fade ov-h" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="width:350px;margin-left:-175px">
    <div class="modal-dialog ov-h">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    提示消息
                </p>
            </div>
            <div class="modal-body text-center  ov-h">
                是否确认删除?
            </div>
            <div class="modal-footer text-center ov-h">
                <button type="button" class="btn bg-color span2" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn bg-color2 span2" id="delete">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-------查看/修改的模态窗--------->
<div id="pop-bottom">
</div>

<!--以下是新建信息弹出页面-->
<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no" id="new-count">
    <#--<h3 class="text-center tit-top p-r-10 pos-re">添加所属场站</br>
        <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <div class="pos-re">
            <form class="navbar-search  m-l-62" style="position: relative;
        float: center;
        margin-top: 5px;
        margin-bottom: 0;">
                <input type="text" class="search-query" placeholder="输入关键字"/>
                <span class="search-lence2"></span>
            </form>
        </div>
    </h3>-->
        <h3 class="text-center tit-top p-r-10 pos-re">添加所属场站<br>

            <div class="pos-re">
                <form class="navbar-search  m-l-62" style="position: relative;
        float: center;
        margin-top: 5px;
        margin-bottom: 0;">
                    <input type="text" class="search-query" placeholder="输入关键字">
                    <span class="search-lence2"></span>
                    <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true" style="
    right: -50px;
    top: 9px;
    position:  absolute;
">
                        ×
                    </button>
                </form>
            </div>
        </h3>
    <div class="row-fluid pad-10 bdbox">
        <ol class="span6 p-l-10 p-r-10 bdbox text-center" id="left-list">
            <dt class="p-b-10">已选（0项）</dt>
            <!-- <dd class="p-b-10"><input type="checkbox" checked/> 天津五河场站</dd>
             <dd class="p-b-10"><input type="checkbox"/> 天津五河场站ddddd</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd> -->
        </ol>
        <ol class="span6  p-l-10 p-r-10 bdbox text-center" id="right-list">
            <dt class="p-b-10">待选（${AllStationSize!""}项）</dt>
        <#list AllStation! as allStation>
            <dd class="p-b-10"><input class="cStaion" type="checkbox" id=${allStation.id!""} name=${allStation.name!""}> ${allStation.name!""}</dd>
        </#list>
        </ol>
    </div>
    <div class="row-fluid p-t-10 p-l-48 p-l-20" id="new_add">
        <button class="btn span8 bg-color offset1">确认添加</button>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/vehi.js"></script>
<script src="../static/js/car/NewCar.js"></script>
<script src="../static/js/jquery.pagination.js"></script>
<#--<script>-->
<#--$('.M-box').pagination({-->
<#--pageCount:50,-->
<#--jump:true,-->
<#--coping:true,-->
<#--homePage:'首页',-->
<#--endPage:'末页',-->
<#--callback:function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--}-->
<#--},function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--});-->

<#--</script>-->
<script>
    $(function () {

        //鉴权
        $('#add_info').click(function () {
            var action = "4_0";
            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        $('#pop_info').css('display', 'none');//弹出新建信息页面
                        $('#pop_info').find('input').val('');//初始化新建信息页面
                        $('#new_add').css('display', 'none');//显示新建信息页面的按钮组
                        $('#txt_add').css('display', 'block');//关闭修改信息页面的按钮组
                        // alert(2222);
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });

        //鉴权
        $('#import_btn').click(function () {
            var action = "4_1";

            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        window.location.href = "../car/getCars";
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });

        $('.update_info').click(function () {
//            alert(111);
            var action = "4_2";

            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        $('#pop_info').css('display', 'none');//弹出新建信息页面
                        $('#pop_info').find('input').val('');//初始化新建信息页面
                        $('#new_add').css('display', 'none');//显示新建信息页面的按钮组
                        $('#txt_add').css('display', 'block');//关闭修改信息页面的按钮组
                        // alert(2222);
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });


        //选择车辆
        $('.cStaion').click(function(){
            var sid = $(this).attr('id');
            var sname = $(this).attr('name');
            $('#new-count').hide();
            $('#pop-bottom').hide();
            document.getElementById("carStation").value=sname;
            document.getElementById("carStation").setAttribute('name', sid);
            document.getElementById("carStationId").value=sid;

        });
    });
</script>

</body>
</html>